<template>
    <div class="center">
        <header>
            <div class="userInfo">
                <div class="headimgurl">
                    <van-image round width="7rem" height="7rem" fit="cover" :src="userInfo.headimgurl"/>
                </div>
                <div class="user">
                    <div class="name">{{userInfo.nickname}}</div>
                    <div>余额：￥{{balance}}</div>
                    <div v-if="userInfo.state == 2">库存：{{stock}}件</div>
                </div>
            </div>
            <van-icon color="#fff" class="setting" name="setting-o" size="2rem" @click="setting" />
        </header>
        <div class="order">
            <van-grid :border='false' :column-num="5">
                <van-grid-item to='/center/orderlist/0' icon="orders-o" text="全部" />
                <van-grid-item to='/center/orderlist/1' :badge='pay' icon="balance-list-o" text="待付款" />
                <van-grid-item to='/center/orderlist/2' :badge='hair' icon="logistics" text="待发货" />
                <van-grid-item to='/center/orderlist/6' :badge='collect' icon="todo-list-o" text="待收货" />
                <van-grid-item to='/center/ReturnGoodsList/3' :badge='outgoods' icon="refund-o" text="退货" />
            </van-grid>
        </div>
        <div class="franchisee" v-if="userInfo.state == 2">
            <van-cell to="/center/merchantCenter/merchantOrderList" title="被指派订单" is-link />
            <van-cell to="/center/merchantCenter/merchantReturnList" title="退单列表" is-link />
            <van-cell to="/center/bankList" title="银行卡列表" is-link />
        </div>
        <div class="franchisee" v-else>
            <van-cell to='/center/merchantAdd' title="我是加盟商" is-link />
        </div>
        <van-tabbar route active-color="#ee0a24">
            <van-tabbar-item to="/" icon="shop-o">首页</van-tabbar-item>
            <van-tabbar-item to="/goodstypelist" icon="apps-o">全部分类</van-tabbar-item>
            <van-tabbar-item to="/shopcart" icon="shopping-cart-o">购物车</van-tabbar-item>
            <van-tabbar-item to="/center" icon="manager-o">会员中心</van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
    data(){
        return{
            userInfo:{},//用户信息
            balance:0,//余额
            stock:0,//库存
            collect: null, //待收货数量
            hair: null, //待发货数量
            pay: null ,//待付款数量
            outpay: null, //退款数量
            outgoods: null ,//退货数量
        }
    },
    computed: {
        ...mapState(['openid', 'userState'])
    },
    mounted(){
        this.getUserInfo()
    },
    methods:{
        //设置
        setting(){
            console.log(this.userInfo)
            this.$router.push({path:`/setting/${this.userInfo.id}`})
        },
        //余额
        async _getBalance() {
            let { data: { code, data } } = await this.$http.get(this.$api.platformBalance,{openid:this.openid})
            if (code === 0) {
                this.balance = data
            } else if(code === 1) {
                this.balance = 0
            }
        },
        //库存
        async _getStock() {
            let { data: { code, data } } = await this.$http.get(this.$api.platformStock,{openid:this.openid})
            if (code === 0) {
                this.stock = data
            }else if(code === 1) {
                this.stock = 0
            }
        },
        //获取用户信息
        async getUserInfo() {
            let form = {
                openid:this.openid
            }
            let { data: { code, data } } = await this.$http.get(this.$api.userinfo,form)
            
            if(code === 0) {
                this.userInfo = data.userinfo
                this.collect = data.collect || ''
                this.hair = data.hair || ''
                this.pay = data.pay || ''
                this.outpay = data.outpay || ''
                this.outgoods = data.outgoods || ''
                if (this.userInfo.state === 2) {
                    this._getBalance()
                    this._getStock()
                }
            }
        },
    }
}
</script>
<style lang="scss" scoped>
    .center{
        header{
            width: 100%;  
            height: 12rem;  
            position: relative;   
            overflow: hidden;
            .userInfo{
                padding: 1.5rem 1rem;
                display: flex;
                align-items: center;
                color: #fff;
                .headimgurl{
                    margin-right: 1rem;
                }
                .user{
                    div{
                        padding: 0.2rem 0;
                    }
                }
            }
            .setting{
                position: absolute;
                right: 1rem;
                top:1rem;
                z-index: 999;
            }
            
        }
        header::after{
            content:'';
            width: 200%;
            height: 12rem;
            position: absolute;
            left: -50%;
            top: 0;
            z-index: -1;
            border-radius: 0 0 50% 50%;
            background:linear-gradient(to right,#ff6034,#ee0a24);
        }
        .order{
            padding: 1rem;
        }
        .franchisee{
            padding:0 1rem;
        }
    }
</style>